<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>题库</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
    <script src="/static/bootstrap/js/jquery-2.1.4.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.js"></script>
</head>
<body>
    <div id="header">
        <!-- 隐藏显示 -->
        <div id="select_lilun_title">
            <span id="lilun_selection">&nbsp; &nbsp;考试题选择 ：&nbsp;</span>{{ lilun_unit_nameform.name }}
            <button id="show_answer" type="button" class="btn btn-info btn-sm">显示答案</button>
            <!-- 错题提交 -->
            <button id="error_submit" type="button" class="btn btn-success btn-sm">错题提交</button>
            <!-- 模式切换 -->
            <button id="modelchange" type="button" class="btn btn-success btn-sm">模式切换</button>
            <!-- 试题自测 -->
            <button id="testself" type="button" class="btn btn-success btn-sm">试题自测</button>
        </div>

{#        <!-- 模式切换 -->#}
{#        <div id="model_change">#}
{#            <button id="modelchange" type="button" class="btn btn-success btn-sm">模式切换</button>#}
{#            <button id="modelchange" type="button" class="btn btn-success btn-sm">模式切换</button>#}
{#        </div>#}
{#        <!-- 错题提交 -->#}
{#        <div id="error_submit">#}
{#            <button id="modelchange" type="button" class="btn btn-success btn-sm">错题提交</button>#}
{#            <button id="modelchange" type="button" class="btn btn-success btn-sm">错题提交</button>#}
{#        </div>#}
        <!-- 到达顶部 -->
        <div id="gotop">
            <img src="/static/images/gotop.png" alt="(⊙o⊙)…">
        </div>
    </div>
    <div id="center">

         <div id="timepiece">
            <!-- 计时器模块 -->
            <div id="timepiece_top"><span>倒计时</span></div>
            <div id="timepiece_center">
                <span id="hour">00</span>:
                <span id="minute">00</span>:
                <span id="sencond">00</span>
            </div>
            <div id="timepiece_bottom">
                <button id="endtestself" type="button" class="btn btn-info">自测结束</button>
            </div>
         </div>

        <div id="center_content">

        </div>

    </div>
    <div id="footer"></div>

    <script>
        // 初始化值
        function init(){
            $('#gotop').hide()      // 隐藏到达顶端事件

            /** 试题自测 **/
            $('#testself').hide()   // 初始化隐藏 自测按钮
            $('#timepiece').hide()  // 初始化隐藏计时器
        }
        init();

        // 设置窗口滚动事件 和 到达顶端事件
        $(window).scroll(function () {
            if ($(document).scrollTop() != 0){
                $('#select_lilun_title').css('left','53%')

                $('#gotop').show()  // 到达顶部show
            }else{
                $('#select_lilun_title').css('left','0px')

                $('#gotop').hide()  // 到达顶部hide
                $('#gotop').css('bottom','10px')
            }
        })


        // 异步返回考试题目
        $(function($) {
            $('.select_title').change(function () {
                if($(this).val() != '0'){
                    $('#testself').show()
                }else{
                    $('#testself').hide()
                }
                $.ajax({
                    url: '/question_bank_titles/',
                    type: 'post',
                    data: {id:$(this).val()},
                    dataType: 'json',
                    success: function (arg) {
                        console.log(arg);
                        {#$('#center').html(arg)#}
                        $('#center_content').html(arg)

                    }
                })
            })
        })

        // 隐藏显示按钮事件
        $('#show_answer').click(function () {
            if($(this).text() == '显示答案'){
                 $('.title_answer b').show();
                 $(this).text('隐藏答案')
            }else{
                $('.title_answer b').hide();
                $(this).text('显示答案')
            }
        })


        // 点击到达顶端事件 划过，划出动态特效
        $('#gotop').click(function () {
            $(this).css('bottom','200px')
            $(window).scrollTop(0)

        })
        $('#gotop').mouseover(function () {
            $(this).css('bottom','50px')
        })
        $('#gotop').mouseout(function () {
            $(this).css('bottom','10px')
        })

        // 模式切换
        $('#modelchange').click(function () {
            if($('td').css('border')[0] == '1'){
                $('td').css('border', '0px solid rgb(221, 221, 221)')
            }else{
                $('td').css('border', '1px solid rgb(221, 221, 221)')
                $('.title_answer td').css('border', '0px solid rgb(221, 221, 221)')
            }
        })
        
        // 错题提交
        $('#error_submit').click(function () {
            var error_titles = new Array()
            arr = $('#all_titles_table > tbody > tr > td.errors_logo > span[cuoti="true"]')
            for(var i = 0 ; i < arr.length; i++){
                error_titles.push($(arr[i]).attr('title_id'))
            }
            var error_titles_json = JSON.stringify(error_titles)
            console.log(error_titles_json);

            // 异步提交错题本信息
            $.ajax({
                    url: '/error_titles_submit.html/',
                    type: 'post',
                    data: {error_titles:error_titles_json},  // 测试默认用户为1， 100 后期需处理
                    dataType: 'json',
                    success: function (arg) {
                        console.log(arg);
                        if(arg.code == 200){
                            alert('提交成功')
                        }else{
                            alert(arg.msg)
                        }
                    }
                })

        })

        // 试题自测
        var timer = null
        function settime(val) {
            /** 计时器 **/
            val--;
            time_show(val)
            {#console.log(val);#}
            if (val == 0) {
                console.log('计时终止');
                releasetestself()
                gradeshow()
            } else {
                timer = setTimeout(function() {
                    settime(val)
                },1000)
            }
        }
        function time_show(val) {
            /** 时间显示 **/
            var sencond = Math.floor(val % 60)
            var minute =  Math.floor(val / 60) % 60
            var hour = Math.floor(val / 60 / 60)

            if(sencond < 10){
                sencond = '0' + sencond
            }
            if(minute < 10){
                minute = '0' + minute
            }
            if(hour < 10){
                hour = '0' + hour
            }

            $('#hour').text(hour)
            $('#minute').text(minute)
            $('#sencond').text(sencond)

        }
        $('#testself').click(function () {
            res = confirm('是否进入当前试题自测？')
            if(res){
                exam_time = 60 * 30;     // 考试时间， 默认 30 分钟
                settime(exam_time)  // 调用计时器

                // 点击按钮，隐藏标签
                $('#header').hide()
                $('#timepiece').show()
                $('.title_answer').hide()
                $('.title_head').next().next().children('td:nth-child(3)').remove()     // 移除新添加答案td元素
                $('#all_titles_table > tbody > tr > td.errors_logo > span').attr('cuoti','false')   // 初始化设置红心
                $('#all_titles_table > tbody > tr > td.errors_logo > span').css('color','rgba(128, 133, 127, 0.3)')
            }
        })
        function releasetestself(){
            /** 自测结束释放 **/
            clearTimeout(timer)
            $('#header').show()
            $('#timepiece').hide()
            $('.title_answer').show()
            $('#show_answer').text('隐藏答案')
        }
        function gradeshow() {
            /** 自测结束验证答案 **/
            var arr = ['A', 'B', 'C', 'D']  // 初始化选项
            var title_score = [5, 5, 5]  // 分别为 单选题， 多选题， 判断题
            if($('.title_head').length > 20) title_score = [3, 2, 2]    // 题目数量大于 20， 分数分布为3,2,2
            var score = 100
            $('.title_head').each(function () {
                var answers = ''
                $(this).next('tr').children().each(function (index, elem) {
                    if($(this).children('input:checked').val() == 'on'){
                        answers += arr[index]
                    }
                })
                {#console.log(answers);#}
                if(answers == '') answers = 'null';     // 没有答题， 默认 'null'
                collect_answer = $(this).next().next().children('td').first().find('b').text()      // 正确答案
                // 显示原答案 和 正确答案
                // $(this).children('td').first().children('pre').append('<span class="blue">您的答案为：' +answers+ ';正确答案为：' + collect_answer + '</span>')
                // 显示正确答案
                // $(this).next().next().append('<td class="select_answers"><span class="blue">选择：' +answers+ ';答案：' + collect_answer + '</span></td>')
                // 不显示正确答案
                $(this).next().next().append('<td class="select_answers" style="border:0px solid rgb(221, 221, 221)"><span class="blue">选择：' +answers+ '</span></td>')
                $('.answer').next('b').show()
                if(answers != collect_answer){
                    $(this).next().next().children('td:nth-child(2)').find('span').attr('cuoti', 'true')
                    $(this).next().next().children('td:nth-child(2)').find('span').css('color', 'red')

                    // 成绩
                    title_type = $(this).find('.title').attr('title_type');
                    if(title_type == '单选题') score -= title_score[0];
                    else if(title_type == '多选题') score -= title_score[1];
                    else if(title_type == '判断题') score -= title_score[2];
                }
            })
            console.log(score);
            alert('您的成绩为：' + score + '\n小红心为您的错题，如需加入错题库，请点击--错题提交--按钮')
        }
        // 自测结束
        $('#endtestself').click(function () {
            cfm = confirm('确定结束本次自测？')
            if(cfm){
                releasetestself()
                gradeshow()
            }
        })
    </script>

    <style>
        window{
            transition: 1s;
        }
        #header{
            height: 48px;
        }
        #select_lilun_title{
            width: 67%;
            position: fixed;
            left: 10px;
            top: 10px;
            transition: 2s;
            line-height: 18px;
        }
        .form-control{
            width: 30%;
            display: inline-block;
        }
        #gotop{
            position: fixed;
            right: 10px;
            bottom: 10px;
            transition: 0.7s;
        }
        .select_title{
            font-size: 14px;
            line-height: 18px;
        }
        .btn {
            vertical-align: top;
            line-height: 18px;
        }
        #lilun_selection{
            font-size: 16.5px;
            line-height: 18px;
        }
        #select_lilun_title button{
            padding: 5px 10px;
            border:1px solid #4cae4c;
        }

    </style>
</body>
<style>

</style>
</html>